<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>购买</title>
		<meta name="keywords" content="不二商城 运动服"/>
		<meta name="description" content="第一个团队项目"/>
		<link rel="stylesheet" href="css/sc_goumai.css" />
	</head>
	<body>
		<div class="web">
			<header>
				<div class="imgFix">
					<a href="homepage.html">
						<img src="img/logo.jpg" alt="" />
					</a>
					<a href="homepage.html">
						<img src="img/logo.jpg" alt="" />
					</a>
				</div>
				<div class="wrap">
					<ul>
						<li><a href="homepage.html">首页</a></li>
						<li><a href="">骑行</a></li>
						<li><a href="">铁三</a></li>
						<li><a href="">跑步</a></li>
						<li><a href="">设计师注入</a></li>
						<li><a href="">品牌专区</a></li>
					</ul>
					<div class="search">
						<div class="input_wrap">
							<input type="text" />
							<button type="button"><i class="iconfont icon-fangdajing"></i></button>
						</div>
					</div>
					<div class="shop-cart">
						<a href=""><i class="iconfont icon-gouwuche"></i></a>
					</div>
					<div class="personal">
						<a><i class="iconfont icon-geren01"></i></a>
						<ul>
							<li><a href="">个人登录</a></li>
							<li><a href="bs_homepage.html">企业后台</a></li>
						</ul>
					</div>
					<div class="tel">
						<span>400-6563-116</span>
					</div>
					<div class="lang">
						<div>CH</div>
					</div>
				</div>
			</header>
			<div class="zhonglu">
				<div class="daohanglan">
					<div class="daohanglanbox">
						<p>首页</p>
						<p class="dayu">></p>
						<p>所有</p>
						<p class="dayu">></p>
						<p>上衣</p>
						<p class="dayu">></p>
						<p>短袖</p>
					</div>
				</div>
				<div class="santic">
					<div class="xuanze">
						<ul>
							<li>Santic森地客<span>春秋骑行服自行车骑行长袖套装冬季骑行长裤男</span></li>
							<li>
								<p>价格:<span>¥146.00</span></p>
								<p>会员价:<span>¥146.00</span></p>
							</li>
							<li>
								<p>送货至:</p>
								<p><span>上海</span><img src="img/ygg/v.png"/></p>
								<p>运费:<span>免运费</span></p>
							</li>
							<li>
								<p>性别:</p>
								<p><span><i class="iconfont icon-xingbie-nan"></i>男</span><span><a href="#"><img src="img/ygg/zhuan_06.jpg"/></a></span></p>
							</li>
							<li>
								<p>尺码:</p>
								<p><a href="#">X</a></p>
								<p><a href="#">M</a></p>
								<p><a href="#">L</a></p>
								<p><a href="#">XL</a></p>
								<p><a href="#">XXL</a></p>
							</li>
							<li>
								<p>数量:</p>
								<p><a href="#">-</a><span>1</span><a href="#">+</a></p>
							</li>
							<li>
								<a href="sc_xinxi.html">立即购买</a>
								<a href="sc_gouwuliucheng.html">加入购物车</a>
								<a href="sc_sheji.html"><span><img src="img/pot.png"/></span>个性定制</a>
								<a href="sc_xiangqingye.html">重新选择</a>
							</li>
							<li>
								<p>服务承诺</p>
								<p><i class="iconfont icon-gou"></i>100%个性定制</p>
								<p><i class="iconfont icon-gou"></i>100%正品保证</p>
								<p><i class="iconfont icon-gou"></i>7天闪电发货</p></br>
								<p><i class="iconfont icon-gou"></i>365天客服热线</p>
								<p><i class="iconfont icon-gou"></i>30天无忧退换</p>
							</li>
						</ul>
					</div>
					<div class="yifu">
						<div class="yifubox">
							<img src="img/ygg/goumai_03.jpg"/>
							<p><a href="#"><i class="iconfont icon-09"></i>分享</a></p>
							<p><a href="#"><i class="iconfont icon-xing"></i>收藏商品</a></p>
							<p><a href="#"><i class="iconfont icon-xihuan"></i>喜欢/21</a></p>
						</div>
					</div>
				</div>
				<div class="qitakuanshi">相同款式的其他款式</div>
				<div class="kuanshi">
					<p class="zoujiantou"><a href="#"><img src="img/ygg/xiaoyuhao_11.jpg"/></a></p>
					<p class="youjiantou"><a href="#"><img src="img/ygg/dayuhao_14.jpg"/></a></p>
					<div>
						<ul class="shangyi">
							<li><img src="img/ygg/shangyi_11.jpg"/></li>
							<li>竞技版骑士上衣</li>
							<li>¥229</li>
						</ul>
						<ul class="shangyier">
							<li><img src="img/ygg/shangyier_13.jpg"/></li>
							<li>普通版骑士上衣</li>
							<li>¥229</li>
						</ul>
						<ul class="qixingku">
							<li><img src="img/ygg/qixingku_15.jpg"/></li>
							<li>竞技版背带骑行裤</li>
							<li>¥229</li>
						</ul>
						<ul class="shangyisan">
							<li><img src="img/ygg/qishishangyisan_15.jpg"/></li>
							<li>普通版骑士上衣</li>
							<li>¥229</li>
						</ul>
					</div>
				</div>
			</div>
				<div class="xialu"><!--下面选项卡部分-->
					<div class="xuanxiangka">
						<ul>
							<li>商品详情</li>
							<li>咨询留意</li>
							<li>评价详情</li>
							<div class="clear"></div>
						</ul>
						<div class="div1 active"></div>
						<div class="div2"></div>
						<div class="div3"></div>
						<p><img src="img/ygg/xuanxiangkapang_03.jpg"/></p>
					</div>
				</div>
			<div class="baozheng">
						<div class="baozhengbox">
							<ul>
								<li><img src="img/ygg/ding_03.jpg"/><span>100%个性定制</span></li>
							</ul>
							<ul>
								<li><img src="img/ygg/zheng_05.jpg"/><span>100%正品保证</span></li>
							</ul>
							<ul>
								<li><img src="img/ygg/qi_07.jpg"/><span>7天闪电发货</span></li>
							</ul>
							<ul>
								<li><img src="img/ygg/tui_09.jpg"/><span>30天无忧退货</span></li>
							</ul>
							<ul>
								<li><img src="img/ygg/rexian_11.jpg"/><span>365天客服热线</span></li>
							</ul>
						</div>
					</div>
			<footer>
				<div class="wrap">
					<div>
						<a href="">
						</a>
					</div>
					<div>
						<ul>
							<li><a href="">新手指南</a></li>
							<li><a href="">用户注册</a></li>
							<li><a href="">定制流程</a></li>
						</ul>
						<ul>
							<li><a href="">付款方式</a></li>
							<li><a href="">支付方式</a></li>
							<li><a href="">支付问题</a></li>
							<li><a href="">常见问题</a></li>
						</ul>
						<ul>
							<li><a href="">售后服务</a></li>
							<li><a href="">退款换货</a></li>
							<li><a href="">配送方式</a></li>
							<li><a href="">联系我们</a></li>
						</ul>
						<ul>
							<li><a href="">政策条款</a></li>
							<li><a href="">服务协议</a></li>
							<li><a href="">隐私条款</a></li>
							<li><a href="">版权条款</a></li>
						</ul>
					</div>
				</div>
				<div class="copyRight">
					&copy; 2016 Wildto Corpation. All Rights Reserved闽ICP备14001544号-1
				</div>
			</footer>
		</div>
	</body>
</html>
<script>
	var libox = document.querySelectorAll(".xuanxiangka ul li");
	var div = document.querySelectorAll(".xuanxiangka>div");
	console.log(libox[0]);
	console.log(div);
	for(let i=0;i<libox.length;i++){
		libox[i].addEventListener("click",function(){
			for(var j=0;j<div.length;j++){
				div[j].classList.remove("active")
			}
			console.log(i);
			div[i].classList.add("active");
		})
	}
</script>